@import 'variables'
@import 'nib'
@import 'mixins'

// primary-background-color = #262626
// primary-text = #ebebeb
// secondary-background-color = #595959
// secondary-text-color = #f4f4f4
// tertiary-background-color = #383838
// tertiary-text-color = #f4f4f4


primary-background-color = #FFF
primary-text = #000
secondary-background-color = #FFF
secondary-text-color = #000
secondary-border-color = #000
tertiary-background-color = #000
tertiary-text-color = #FFF
tertiary-background-hover = #292e3a
tertiary-border-color = #000
tertiary-text-hover = #f4f4f4

body.theme-outline
  font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif
  background: primary-background-color
  color: primary-text

  a
    color: color-link
    &:hover
      color: color-link-hover
      text-decoration: none

  hr
    border-color: secondary-border-color

  .actions .button
    color: secondary-text-color

  #incompatible
    background-color: #fff

  table.json-object
    background-color: #eee;
    border: 1px solid secondary-border-color
    border-collapse: separate
    border-radius: 5px
    tbody
      tr
        background-color: transparent;
        td, th
          color: #666;

  .status-bar-wrapper
    display: none
  .status-bar
    color: rgb(120, 129, 133)
    background-color: #FFF
    .status

    .popover.bottom
      .arrow:after
        border-bottom-color: #f7f7f7
    .details
      margin-top: -4px
      margin-left: 12px
    .updated-code
      float:right
      margin-right horizontal-padding
    &.error
      color: color-error
    .fa-ok
      color: color-success

  .fullscreen-container
    background-color: #fff
    .code-bar
      // darkened
      background-color: secondary-background-color
      .actions
        display: none
      a.close-fullscreen
        color: #9B9DA2
    a.fa-download
      color: #9B9DA2
    .result
      background-color: #F8F9FB

  .key.code
    color: #eee

  //
  // Bootstrap overrides
  //////////////////////

  .navbar-inverse .navbar-inner
    background: linear-gradient(top, #333, #181818)

  .navbar .brand
    color: #fff

  /////
  .bg-warning
    background-color: #635c36
  .text-warning
    color: tertiary-text-color !important

  #error
    background-color: color-error
    color: #fff
  .connection-error
    #error
      display: block

  #stream
    .frame
      .outer
        border: 1px solid tertiary-border-color
        .left-frame-toggle
          border-right: 1px solid primary-text
        .left-toggle-menu 
          border-right: 1px solid primary-text
          button
            border-bottom: 1px solid primary-text
      .view-result
        .view-result-graph
          background-color: tertiary-background-color
        article.guide
          .teaser
            border-color: tertiary-border-color

      .code-bar
        .actions li a
          border-left: 1px solid primary-text
        .code
          color: secondary-text-color
        background-color: secondary-background-color
        border-bottom: 1px solid secondary-border-color


  #main

    #editor
      .balled
        background-color: tertiary-background-color

    .hero-unit
      border: 1px solid secondary-border-color

    article.guide, article.help, article.guide, pre
      color: secondary-text-color
      background-color: secondary-background-color
      button
        border: 1px solid secondary-border-color
      .panel
        border: 1px solid secondary-border-color
        .form-control
          border: 1px solid secondary-border-color
      p
        color: secondary-text-color
      pre.code
        color: tertiary-text-color
        background-color: tertiary-background-color
        &:hover
          background-color: tertiary-background-hover
          color: tertiary-text-hover

    .intro
      background: url(../images/intro.png) 50% 48% no-repeat

    .view-editor, .view-editor pre
      //background-color: tertiary-background-color
      z-index: -1

    footer
      color: #A0AAB1

  // CodeMirror overrides
  .CodeMirror
    z-index: 2
    &.cm-s-neo, &.cm-s-css
      color: primary-text
      .cm-comment
        color: primary-text
      .cm-keyword, .cm-property
        color: primary-text
      .cm-atom, .cm-number
        color: primary-text
      .cm-node, .cm-tag
        color: primary-text
      .cm-string
        color: primary-text
      .cm-variable, .cm-qualifier
        color: primary-text
  #editor
    .CodeMirror
      .CodeMirror-placeholder
        color: primary-text
      .CodeMirror-lines
      .CodeMirror-gutters
      .CodeMirror-linenumber
        color: primary-text
      .CodeMirror-code
        color: primary-text
      div.CodeMirror-cursor
        border-left: 11px solid primary-text
        opacity: 0.5
    .prompt
      color: primary-text
    .disable-highlighting
      .CodeMirror .CodeMirror-code *
        color: primary-text
  div.CodeMirror-selected
    background-color: primary-text
    opacity: 0.5

  //Set it here so it applies to fullscreen as well
  svg.query-plan
    g.operator
      rect.outline
        stroke: #000000 !important
    g.link
      path
        stroke: #000000 !important
